<template>
  <view class="container">
    <uni-card :is-shadow="false" is-full>
      <text class="uni-h6"
        >uni-forms
        组件一般由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。</text
      >
    </uni-card>
    <uni-section title="基本用法" type="line">
      <view class="example">
        <!-- 基础用法，不包含校验规则 -->
        <uni-forms ref="baseForm" :modelValue="baseFormData">
          <uni-forms-item label="姓名" required>
            <uni-easyinput
              v-model="baseFormData.name"
              placeholder="请输入姓名"
            />
          </uni-forms-item>
          <uni-forms-item label="年龄" required>
            <uni-easyinput
              v-model="baseFormData.age"
              placeholder="请输入年龄"
            />
          </uni-forms-item>
          <uni-forms-item label="性别" required>
            <uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
          </uni-forms-item>
          <uni-forms-item label="兴趣爱好" required>
            <uni-data-checkbox
              v-model="baseFormData.hobby"
              multiple
              :localdata="hobbys"
            />
          </uni-forms-item>
          <uni-forms-item label="自我介绍">
            <uni-easyinput
              type="textarea"
              v-model="baseFormData.introduction"
              placeholder="请输入自我介绍"
            />
          </uni-forms-item>
          <uni-forms-item label="日期时间">
            <uni-datetime-picker
              type="datetime"
              return-type="timestamp"
              v-model="baseFormData.datetimesingle"
            />
          </uni-forms-item>
        </uni-forms>
      </view>
    </uni-section>

    <uni-section title="对齐方式" type="line">
      <view class="example">
        <view class="segmented-control">
          <uni-segmented-control
            :current="current"
            :values="items"
            @clickItem="onClickItem"
            styleType="button"
          >
          </uni-segmented-control>
        </view>
        <!-- 展示不同的排列方式 -->
        <uni-forms
          ref="baseForm"
          :modelValue="alignmentFormData"
          :label-position="alignment"
        >
          <uni-forms-item label="姓名" required>
            <uni-easyinput
              v-model="baseFormData.name"
              placeholder="请输入姓名"
            />
          </uni-forms-item>
          <uni-forms-item label="年龄" required>
            <uni-easyinput
              v-model="baseFormData.age"
              placeholder="请输入年龄"
            />
          </uni-forms-item>
        </uni-forms>
      </view>
    </uni-section>

    <uni-section title="表单校验" type="line">
      <view class="example">
        <!-- 基础表单校验 -->
        <uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
          <uni-forms-item label="姓名" required name="name">
            <uni-easyinput
              v-model="valiFormData.name"
              placeholder="请输入姓名"
            />
          </uni-forms-item>
          <uni-forms-item label="年龄" required name="age">
            <uni-easyinput
              v-model="valiFormData.age"
              placeholder="请输入年龄"
            />
          </uni-forms-item>
          <uni-forms-item label="自我介绍" name="introduction">
            <uni-easyinput
              type="textarea"
              v-model="valiFormData.introduction"
              placeholder="请输入自我介绍"
            />
          </uni-forms-item>
        </uni-forms>
        <button type="primary" @click="submit('valiForm')">提交</button>
      </view>
    </uni-section>

    <uni-section title="自定义校验规则" type="line">
      <view class="example">
        <!-- 自定义表单校验 -->
        <uni-forms
          ref="customForm"
          :rules="customRules"
          :modelValue="customFormData"
        >
          <uni-forms-item label="姓名" required name="name">
            <uni-easyinput
              v-model="customFormData.name"
              placeholder="请输入姓名"
            />
          </uni-forms-item>
          <uni-forms-item label="年龄" required name="age">
            <uni-easyinput
              v-model="customFormData.age"
              placeholder="请输入年龄"
            />
          </uni-forms-item>
          <uni-forms-item label="兴趣爱好" required name="hobby">
            <uni-data-checkbox
              v-model="customFormData.hobby"
              multiple
              :localdata="hobbys"
            />
          </uni-forms-item>
        </uni-forms>
        <button type="primary" @click="submit('customForm')">提交</button>
      </view>
    </uni-section>

    <uni-section title="动态表单" type="line">
      <view class="example">
        <!-- 动态表单校验 -->
        <uni-forms
          ref="dynamicForm"
          :rules="dynamicRules"
          :modelValue="dynamicFormData"
        >
          <uni-forms-item label="邮箱" required name="email">
            <uni-easyinput
              v-model="dynamicFormData.email"
              placeholder="请输入姓名"
            />
          </uni-forms-item>
          <uni-forms-item
            v-for="(item, index) in dynamicLists"
            :key="item.id"
            :label="item.label + ' ' + index"
            required
            :rules="item.rules"
            :name="'domains[' + item.id + ']'"
          >
            <view class="form-item">
              <uni-easyinput
                v-model="dynamicFormData.domains[item.id]"
                placeholder="请输入域名"
              />
              <button
                class="button"
                size="mini"
                type="default"
                @click="del(item.id)"
              >
                删除
              </button>
            </view>
          </uni-forms-item>
        </uni-forms>
        <view class="button-group">
          <button type="primary" size="mini" @click="add">新增域名</button>
          <button type="primary" size="mini" @click="submit('dynamicForm')">
            提交
          </button>
        </view>
      </view>
    </uni-section>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 基础表单数据
      baseFormData: {
        name: "",
        age: "",
        introduction: "",
        sex: 2,
        hobby: [5],
        datetimesingle: 1627529992399,
      },
      // 表单数据
      alignmentFormData: {
        name: "",
        age: "",
      },
      // 单选数据源
      sexs: [
        {
          text: "男",
          value: 0,
        },
        {
          text: "女",
          value: 1,
        },
        {
          text: "保密",
          value: 2,
        },
      ],
      // 多选数据源
      hobbys: [
        {
          text: "跑步",
          value: 0,
        },
        {
          text: "游泳",
          value: 1,
        },
        {
          text: "绘画",
          value: 2,
        },
        {
          text: "足球",
          value: 3,
        },
        {
          text: "篮球",
          value: 4,
        },
        {
          text: "其他",
          value: 5,
        },
      ],
      // 分段器数据
      current: 0,
      items: ["左对齐", "顶部对齐"],
      // 校验表单数据
      valiFormData: {
        name: "",
        age: "",
        introduction: "",
      },
      // 校验规则
      rules: {
        name: {
          rules: [
            {
              required: true,
              errorMessage: "姓名不能为空",
            },
          ],
        },
        age: {
          rules: [
            {
              required: true,
              errorMessage: "年龄不能为空",
            },
            {
              format: "number",
              errorMessage: "年龄只能输入数字",
            },
          ],
        },
      },
      // 自定义表单数据
      customFormData: {
        name: "",
        age: "",
        hobby: [],
      },
      // 自定义表单校验规则
      customRules: {
        name: {
          rules: [
            {
              required: true,
              errorMessage: "姓名不能为空",
            },
          ],
        },
        age: {
          rules: [
            {
              required: true,
              errorMessage: "年龄不能为空",
            },
          ],
        },
        hobby: {
          rules: [
            {
              format: "array",
            },
            {
              validateFunction: function (rule, value, data, callback) {
                if (value.length < 2) {
                  callback("请至少勾选两个兴趣爱好");
                }
                return true;
              },
            },
          ],
        },
      },
      dynamicFormData: {
        email: "",
        domains: {},
      },
      dynamicLists: [],
      dynamicRules: {
        email: {
          rules: [
            {
              required: true,
              errorMessage: "域名不能为空",
            },
            {
              format: "email",
              errorMessage: "域名格式错误",
            },
          ],
        },
      },
    };
  },
  computed: {
    // 处理表单排列切换
    alignment() {
      if (this.current === 0) return "left";
      if (this.current === 1) return "top";
      return "left";
    },
  },
  onLoad() {},
  onReady() {
    // 设置自定义表单校验规则，必须在节点渲染完毕后执行
    this.$refs.customForm.setRules(this.customRules);
  },
  methods: {
    onClickItem(e) {
      console.log(e);
      this.current = e.currentIndex;
    },
    add() {
      this.dynamicLists.push({
        label: "域名",
        rules: [
          {
            required: true,
            errorMessage: "域名项必填",
          },
        ],
        id: Date.now(),
      });
    },
    del(id) {
      let index = this.dynamicLists.findIndex((v) => v.id === id);
      this.dynamicLists.splice(index, 1);
    },
    submit(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          console.log("success", res);
          uni.showToast({
            title: `校验通过`,
          });
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
};
</script>

<style lang="scss">
.example {
  padding: 15px;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  margin-left: 10px;
}
</style>
